<template>
  <div>
    <el-tabs
      v-model="activeName"
      style="box-shadow: none;"
      type="border-card"
      @tab-click="handleClick"
    >
      <el-tab-pane
        label="集群基础配置"
        name="1"
      >
        <el-form
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="集群名称">
            <el-input
              v-model="aForm.clusterName"
              placeholder="请输入"
              disabled
            />
          </el-form-item>
          <el-form-item label="集群版本">
            <el-input
              v-model="aForm.clusterVersion"
              style="width: 200px"
              placeholder="请输入"
              disabled
            />
          </el-form-item>
          <el-form-item label="集群标识">
            <el-input
              v-model="aForm.clusterFlag"
              style="width: 200px"
              placeholder="请输入"
              disabled
            />
          </el-form-item>
          <el-form-item label="hdfs前缀路径">
            <el-input
              v-model="aForm.hdfsPrefixPath"
              placeholder="请输入"
              style="width: 320px"
              disabled
            />
          </el-form-item>
        </el-form>
        <div style="text-align: center; margin-top: 20px">
          <el-button
            type="primary"
            size="mini"
            @click="leadFlag = true"
          >
            表清单导入/表清单文件
          </el-button>
          <el-button
            type="primary"
            size="mini"
            @click="cCloses"
          >关闭</el-button>
        </div>
      </el-tab-pane>
      <!-- <el-tab-pane
        label="测试基础配置"
        name="2"
      >
        <div class="crud-group">
          <el-input
            v-model="tblDatabaseName"
            placeholder="请输入库名"
          />
          <el-input
            v-model="tblName"
            placeholder="请输入表名"
          />
          <el-button
            type="success"
            icon="el-icon-search"
            @click="search"
          >搜索</el-button>
          <el-button
            type="warning"
            icon="el-icon-refresh-left"
            @click="reset"
          >重置
          </el-button>
        </div>
        <el-table
          v-loading="isLoading"
          :data="tblList"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          />
          <el-table-column
            prop="tblDatabaseName"
            label="库名"
            show-overflow-tooltip
          />
          <el-table-column
            prop="tblName"
            label="表名"
            show-overflow-tooltip
          />
          <el-table-column
            prop="partName"
            label="分区值"
            show-overflow-tooltip
          />
          <el-table-column
            prop="location"
            label="HDFS存储路径"
            show-overflow-tooltip
          />
          <el-table-column
            prop="createTime"
            label="创建时间"
            show-overflow-tooltip
          />
        </el-table>
        <div style="float: right">
          <el-pagination
            :current-page="current"
            :page-size="size"
            layout="prev, pager, next,sizes,total"
            :total="length"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
        <div style="clear: both" />
        <div style="text-align: center; margin-top: 20px">
          <el-button
            type="primary"
            size="mini"
            @click="cCloses"
          >关闭</el-button>
        </div>
      </el-tab-pane> -->
    </el-tabs>
    <el-dialog
      :close-on-click-modal="false"
      :before-close="leadCloses"
      :visible.sync="leadFlag"
      append-to-body
      title="手动同步数据导入"
      width="800px"
    >
      <div class="download">
        <el-upload
          ref="upload"
          class="upload-demo"
          action="https://jsonplaceholder.typicode.com/posts/"
          :auto-upload="false"
          :on-preview="handlePreview"
          :on-remove="handleRemove"
          :on-change="loadExcelFile"
          :before-remove="beforeRemove"
          drag
          :limit="1"
          :on-exceed="handleExceed"
          :file-list="fileList"
        >
          <i class="el-icon-upload" />
          <!-- <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> -->
        </el-upload>
        <el-button
          type="primary"
          plain
          class="btn"
          icon="el-icon-upload2"
          @click="toUpload"
        >文件上传</el-button>
        <el-button
          type="primary"
          plain
          class="btn"
          icon="el-icon-download"
          @click="download"
        >模板下载</el-button>
      </div>
      <div class="dialog-footer">
        <el-button
          class="up"
          @click="leadCloses"
        >关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ballsApi from '@/api/dashboard/ballsPanel'
import { downloadFile } from '@/utils/index'
export default {
  data() {
    return {
      isLoading: false,
      activeName: '1',
      tblName: '',
      tblDatabaseName: '',
      aForm: {},
      tblList: [
        {
          libName: 'lib_A',
          tblName: 'tbl_A',
          time: '2023-8-10 14:11:10',
          status: '待确认'
        },
        {
          libName: 'lib_B',
          tblName: 'tbl_B',
          time: '2023-8-11 12:17:14',
          status: '已确认'
        }
      ],
      leadFlag: false,
      syncFlag: false,
      fileList: [],
      current: 1,
      size: 10,
      length: 0
    }
  },
  mounted() {
    this.getBasicData()
    this.getclustersparingconf()
  },
  methods: {
    getclustersparingconf() {
      var data = {
        current: 1,
        size: 10,
        clusterName: 'UAT'
      }
      ballsApi.getclustersparingconf(data)
        .then((data) => {
          console.log('UAT')
          console.log(data.records[0])
          this.aForm = data.records[0]
        })
    },
    getBasicData(resetPage = true) {
      if (resetPage) {
        this.current = 1
      }
      this.isLoading = true
      var data = {
        current: this.current,
        size: this.size,
        tblName: this.tblName,
        tblDatabaseName: this.tblDatabaseName
      }
      ballsApi.wgUATbasicdata(data)
        .then((res) => {
          console.log(res)
          this.length = res.total
          this.tblList = res.records
        }).finally(() => {
          this.isLoading = false
        })
    },
    search() {
      this.getBasicData()
    },
    reset() {
      this.tblName = ''
      this.tblDatabaseName = ''
      this.getBasicData()
    },
    // 分页
    handleSizeChange(val) {
      this.current = 1
      this.size = val
      this.getBasicData()
    },
    // 分页
    handleCurrentChange(val) {
      this.current = val
      this.getBasicData(false)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    leadCloses() {
      this.$confirm('是否关闭页面?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.leadFlag = false
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    next() {
      this.activeName = '2'
    },
    toUpload() {
      if (this.fileList.length > 0) {
        const formData = new FormData()
        formData.append('file', this.fileList[0].raw)

        ballsApi.readExcel(formData)
          .then((res) => {
            console.log(res)
            this.$notify({
              title: res.success,
              type: 'success',
              duration: 6000
            })
            this.fileList = []
            this.leadFlag = false
            this.activeName = '2'
          })
      } else {
        this.$notify({
          title: '请选择需要上传的文件！',
          type: 'warning',
          // 存在时间
          duration: 6000
        })
      }
    },
    cCloses() {
      this.$confirm('是否关闭页面?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.$emit('wgUTAcate')
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    handlePreview(file) {
      console.log('handlePreview')
      console.log(file)
    },
    handleRemove(file, fileList) {
      console.log('handleRemove')
      console.log(file, fileList)
    },
    beforeRemove(file, fileList) {
      console.log('beforeRemove')
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length
        } 个文件`
      )
    },
    loadExcelFile(file, fileList) {
      console.log(fileList)
      console.log(file)
      var fileName = file.name.substring(file.name.lastIndexOf('.') + 1)
      if (fileName !== 'xlsx' && fileName !== 'xls') {
        this.beforUploadJobError('文件类型不是excel文件!')
        this.$refs['upload'].clearFiles()
        return false
      }
      this.fileList = fileList
      return true
    },
    beforUploadJobError(msg) {
      this.$notify.error({
        title: '错误',
        message: msg,
        duration: 15000
      })
    },
    handleSelectionChange(val) {
      console.log(val)
    },
    download() {
      ballsApi.download()
        .then((res) => {
          console.log(res)
          downloadFile(res, 'UAT', 'xls')
        })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.head-container .filter-item {
  display: inline-block;
  vertical-align: middle;
  margin: 0 3px 0px 0;
}

.download {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.btn {
  width: 100px !important;
  height: 38px !important;
  margin-left: 40px !important;
}

::v-deep.el-upload-dragger {
  width: 80px !important;
  height: 40px !important;
}

.el-icon-upload {
  font-size: 40px !important;
  margin: 0 !important;
  line-height: 40px !important;
}

.dialog-footer {
  margin-top: 40px;
  display: flex;
  /* flex布局中，定义了项目在主轴上的对齐方式。center表示居中显示 */
  justify-content: center;
}

/* .up{
    position: inherit;
  } */
</style>
